<template>
	<view class="evaluate">
		<!-- <nav-bar title="业主评价" isBack></nav-bar> -->
		<nav-bars bgColor="#fff" fontColor="#000" title="业主评价"></nav-bars>
		<!-- 数据列表 -->
		<view class="e_data">
			<view class="e_dContain">
				<view class="e_dCan">
					<!-- 业主评价 -->
					<view class="e_dList">
						<view class="e_dEval">
							<view>
								<view class="e_deItem" v-for="(item,index) in TrendList" :key="index">
									<view class="e_deHead" v-if="item.is_anonymous==0">
										<image :src="item.user_id.avatar.path"></image>
									</view>
									<view class="e_deHead" v-else>
										<image src="@/static/common/icon_1.png"></image>
									</view>
									<view class="e_deCont">
										<view class="e_deUser">
											<view class="e_deTime"><text
													space="ensp">{{$utils.getFormatDate(item.create_time*1000,'yyyy-MM-dd hh:mm:ss')}}</text>
											</view>
											<view class="e_deName">{{item.is_anonymous==0?item.user_id.username:'匿名用户'}}
											</view>
											<!-- <view class="e_deStars">
												<view class="e_deStar" v-for="(items,indexs) in item.design_score" v-if="index < item.overall_score"><image src="/static/common/icon_stars3.png"></image></view>
											</view> -->
											<view class="e_deRemark">综合：{{item.overall_score}} |
												服务：{{item.service_score}} | 设计：{{item.design_score}}</view>
										</view>
										<view class="e_deMedia">
											<view class="e_deText">{{item.content}}</view>
											<view class="e_deImgs" v-if="item.type == 1">
												<view class="e_deImg" v-for="(itemx,indexx) in item.media" :key="indexx"
													v-if="indexx<9 && !itemx.cover" @tap.stop="preview(index,item.media)">
													<image :src="itemx.path"></image>
												</view>
											</view>
											<view class="e_deImgs" v-if="item.type == 2">
												<view class="video-box" v-for="(itemx,indexx) in item.media"
													:key="indexx" v-if="itemx.cover">
													<video id="myVideo" :src="itemx.path" controls></video>
												</view>
												<!-- <view class="p_deImg" v-for="(itemx,indexx) in items.media"
													:key="indexx" >
													<video style="width: 188rpx;height: 188rpx;" id="myVideo" :src="itemx.path" controls></video>
												</view> -->
											</view>
										</view>
									</view>
								</view>
								<view v-if="isMore == false" style="text-align: center;padding: 30rpx;color: #999;">
									暂无更多评价</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_design from '@/service/team.js'

	export default {
		data() {
			return {
				TrendList: [],
				designerId: '',
				TrendPage: '',
				isMore: true
			}
		},

		// components: { navBar },
		onLoad(e) {
			this.$utils.getUrl()
			this.designerId = e.designerId
			this.getTrend()
		},
		onReachBottom() {
		 this.getTrend('Bottom')
		},
		filters: {
			formatDate(value) {
				var date = new Date();
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
		},
		methods: {
			// 获取评价列表
			getTrend(datas) {
				var that = this
				let TrendPage = this.TrendPage
				service_design.getcomList({
						page: ++TrendPage,
						designer_id: that.designerId,
						type: ''
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data
							// this.TrendList = data 
							if (datas == 'Bottom') {
								if (data.length !== 0 || data.length !== 0) {
									that.TrendList.push(data)
								} else {
									that.isMore = false
								}
							} else {
								// console.log(data);
								that.TrendList = data
								that.TrendPage++
							}

						}
					})
			},
			// 预览图片
			preview(index, urls) {
				let img_url = []
				for (let i = 0; i < urls.length; i++) {
					img_url.push(
						urls[i].path
					);
				}
				uni.previewImage({
					urls: img_url,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			previews(urls) {
				let img_url = []
				img_url.push(
					urls
				);
				uni.previewImage({
					urls: img_url,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 数据列表
	.evaluate .e_data .e_dList {
		background: #fff;
	}

	// 装修案例/设计动态/业主评价 底线
	.evaluate .e_data .e_dEval .e_deItem {
		position: relative;

		&::after {
			content: "";
			height: 1px;
			background: #f4f4f4;
			position: absolute;
			bottom: 0;
			left: 32rpx;
			right: 32rpx;
			transform: scaleY(.5);
		}

		&:nth-last-child(1)::after {
			content: none;
		}
	}

	// 业主评价
	.evaluate .e_data .e_dEval {
		padding: 40rpx 0;

		.e_deItem {
			padding: 40rpx 0;

			&:nth-child(1) {
				padding-top: 0;
			}
		}

		.e_deHead {
			width: 84rpx;
			height: 84rpx;
			margin: 0 20rpx 0 32rpx;
			border-radius: 50%;
			background: #f0f0f0;
			overflow: hidden;
			float: left;
		}

		.e_deCont {
			overflow: hidden;
		}

		.e_deUser {
			padding: 8rpx 36rpx 0 0;
		}

		.e_deTime {
			height: 34rpx;
			line-height: 34rpx;
			color: #939393;
			font-size: 24rpx;
			float: right;
		}

		.e_deName {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: bold;
		}

		.e_deStars {
			height: 20rpx;
			margin-top: 8rpx;
		}

		.e_deStar {
			width: 20rpx;
			height: 20rpx;
			margin-right: 8rpx;
			float: left;
		}

		.e_deRemark {
			height: 34rpx;
			line-height: 34rpx;
			color: #939393;
			font-size: 24rpx;
			margin-top: 16rpx;
		}

		.e_deText {
			line-height: 44rpx;
			padding-right: 36rpx;
		}

		.e_deImgs {
			overflow: hidden;
		}
       .video-box {
       	width: 388rpx;
       	height: 288rpx;
       	margin: 12rpx 10rpx 0 0;
       	border-radius: 4rpx;
       	background: #f0f0f0;
       	float: left;
       	overflow: hidden;
       
       	video {
       		width: 100%;
       		height: 100%;
       	}
       }
		.e_deImg {
			width: 188rpx;
			height: 188rpx;
			margin: 12rpx 10rpx 0 0;
			border-radius: 4rpx;
			background: #f0f0f0;
			float: left;
			overflow: hidden;
		}
	}
</style>
